<!-- 信号视角组件 -->
<template>
  <div class="signal-view">
    <div class="signal-views">
      <!-- 频谱图 -->
      <div class="chart-container">
        <div class="chart-header">
          <h4>频谱分析</h4>
          <el-button-group size="small">
            <el-button @click="resetSpectrumView">重置</el-button>
            <el-button @click="exportSpectrum">导出</el-button>
          </el-button-group>
        </div>
        <div class="spectrum-chart" id="spectrumChart">
          <div class="chart-placeholder">
            <div class="chart-info">
              <h5>频谱分析图</h5>
              <p>ECharts 图表引擎</p>
              <div class="spectrum-stats">
                <div class="stat-item">
                  <span class="label">频率范围:</span>
                  <span class="value">{{ spectrumRange }}</span>
                </div>
                <div class="stat-item">
                  <span class="label">峰值频率:</span>
                  <span class="value">{{ peakFrequency }}</span>
                </div>
                <div class="stat-item">
                  <span class="label">信号强度:</span>
                  <span class="value">{{ signalStrength }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 波形图 -->
      <div class="chart-container">
        <div class="chart-header">
          <h4>信号波形</h4>
          <el-button-group size="small">
            <el-button @click="resetWaveformView">重置</el-button>
            <el-button @click="exportWaveform">导出</el-button>
          </el-button-group>
        </div>
        <div class="waveform-chart" id="waveformChart">
          <div class="chart-placeholder">
            <div class="chart-info">
              <h5>信号波形图</h5>
              <p>ECharts 时序图表</p>
              <div class="waveform-stats">
                <div class="stat-item">
                  <span class="label">采样率:</span>
                  <span class="value">{{ samplingRate }}</span>
                </div>
                <div class="stat-item">
                  <span class="label">波形类型:</span>
                  <span class="value">{{ waveformType }}</span>
                </div>
                <div class="stat-item">
                  <span class="label">幅度:</span>
                  <span class="value">{{ amplitude }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// Props
defineProps({
  signalData: {
    type: Object,
    default: () => ({})
  }
})

// Emits
const emit = defineEmits([
  'spectrumReset',
  'spectrumExport', 
  'waveformReset',
  'waveformExport'
])

// 频谱数据
const spectrumRange = ref('1-18 GHz')
const peakFrequency = ref('8.5 GHz')
const signalStrength = ref('-65 dBm')

// 波形数据
const samplingRate = ref('100 MHz')
const waveformType = ref('脉冲信号')  
const amplitude = ref('±2.5V')

// 方法定义
const resetSpectrumView = () => {
  emit('spectrumReset')
  ElMessage.info('频谱视图已重置')
}

const exportSpectrum = () => {
  emit('spectrumExport')
  ElMessage.success('频谱数据已导出')
}

const resetWaveformView = () => {
  emit('waveformReset')
  ElMessage.info('波形视图已重置')
}

const exportWaveform = () => {
  emit('waveformExport')
  ElMessage.success('波形数据已导出')
}

// 初始化图表
const initializeCharts = () => {
  // 这里将初始化 ECharts 图表
  console.log('初始化信号图表...')
  
  // 模拟数据更新
  setInterval(() => {
    // 模拟频谱数据变化
    const frequencies = ['8.2', '8.5', '8.8', '9.1', '9.4']
    peakFrequency.value = frequencies[Math.floor(Math.random() * frequencies.length)] + ' GHz'
    
    // 模拟信号强度变化
    const strength = -70 + Math.random() * 20
    signalStrength.value = strength.toFixed(1) + ' dBm'
  }, 3000)
}

// 组件挂载时初始化
onMounted(() => {
  initializeCharts()
})
</script>

<style scoped>
.signal-view {
  height: 100%;
  padding: 1vh;
}

.signal-views {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1vh;
}

.chart-container {
  background: #263445;
  border-radius: 0.8vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chart-header {
  height: 5vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.5vw;
  background: #1f2d3d;
  border-bottom: 1px solid #2d3a4b;
  flex-shrink: 0;
}

.chart-header h4 {
  margin: 0;
  font-size: 1rem;
  color: #bfcbd9;
}

.chart-header .el-button {
  background: #263445;
  border-color: #2d3a4b;
  color: #bfcbd9;
  font-size: 0.8rem;
}

.chart-header .el-button:hover {
  background: #2d3a4b;
  border-color: #409EFF;
  color: #409EFF;
}

.spectrum-chart,
.waveform-chart {
  flex: 1;
  background: #0a0f1b;
  position: relative;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a0f1b 0%, #1a2332 100%);
}

.chart-info {
  text-align: center;
  color: #bfcbd9;
}

.chart-info h5 {
  margin: 0 0 0.5vh 0;
  font-size: 1.2rem;
  color: #409EFF;
}

.chart-info p {
  margin: 0 0 2vh 0;
  color: #8591a3;
  font-size: 0.85rem;
}

.spectrum-stats,
.waveform-stats {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  margin-top: 2vh;
  padding: 1.5vh;
  background: rgba(38, 52, 69, 0.6);
  border-radius: 0.6vh;
  backdrop-filter: blur(4px);
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.stat-item .label {
  color: #8591a3;
}

.stat-item .value {
  color: #409EFF;
  font-family: 'Monaco', 'Consolas', monospace;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .chart-header {
    padding: 0 1vw;
  }
  
  .chart-header h4 {
    font-size: 0.9rem;
  }
  
  .spectrum-stats,
  .waveform-stats {
    padding: 1vh;
  }
  
  .stat-item {
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .signal-views {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 0.5vh;
  }
  
  .chart-info h5 {
    font-size: 1rem;
  }
  
  .spectrum-stats,
  .waveform-stats {
    gap: 0.5vh;
    margin-top: 1vh;
  }
}
</style>